<template>
  <div>

     
	  	<myheader></myheader>
		
		<div id="carousel" class="carousel slide" data-ride="carousel">
		
	
			<ul class="carousel-indicators">
				<!-- <li data-target="#carousel" data-slide-to="0" class="active"></li>
				<li data-target="#carousel" data-slide-to="1"></li>
				<li data-target="#carousel" data-slide-to="2"></li> -->
			</ul>
	
			<div class="carousel-inner">
			
				<!--Text only with background image-->
				<!-- <div class="carousel-item active">
					<div class="container slide-textonly">
						<div>
							<h1>York &amp; Smith</h1>
							<p class="lead">Spring/Summer 2018 Collection</p>
							<a href="#" class="btn btn-outline-secondary">View Collection</a>
						</div>
					</div>
				</div> -->
				<Carousel :height='700' :datas="params" @click='pic_click'>
					
				</Carousel>
				<div>
					<ul>
						<li v-for="item,index in goods_rank">
							<p v-if="index <= 3 " style="color:red">{{ item.name }}</p>
							<p v-else>{{ item.name }}</p>
						</li>
					</ul>
				</div>
				
				
			
			</div>
		</div>
		<section class="collections text-center ">
			<div class="container-fluid">
				<div class="row">
					<div class="collection col-md-6 alt-background">
						<div class="container container-right text-center">
							<div>
								<h1>Women's</h1>
								<p class="lead">Spring/Summer 2018 Collection</p>
								<a href="catalog.html" class="btn btn-outline-secondary">Browse Women's</a>
							</div>
						</div>
					</div>
					<div class="collection col-md-6 bg-secondary inverted">
						<div class="container container-left text-center">
							<div>
								<h1>Men's</h1>
								<p class="lead">Spring/Summer 2018 Collection</p>
								<a href="catalog.html" class="btn btn-outline-white">Browse Men's</a>
							</div>
						</div>
					</div>
				</div>
			</div>
    </section>
    
		<section class="featured-block text-center">
			<div class="container">
				<div class="row justify-center">
					<div class="col-md-6 text-center">
						<img class="mt-4 mb-4 img-fluid" src="../assets/images/placeholder-jacket.png" style="width: 100%;">
					</div>
					<div class="col-md-6 text-center text-md-left">
						<h2 class="mb-3">Spring/Summer Collection 2018</h2>
						<p class="lead mt-2 mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus erat sed sem sagittis cursus.</p>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Suspendisse cursus erat sed sem sagittis cursus. Etiam porta sem malesuada magna mollis euismod.</p>
						<a href="#" class="btn btn-md btn-outline-primary mt-3">Shop Now</a>
					</div>
				</div>
			</div>
		</section>
		
		<section class="products text-center">
			<div class="container">
				<h3 class="mb-4">商品展示</h3>
				<!-- 遍历商品列表 -->
				<div class="row">

					<div class="col-sm-6 col-md-3 col-product" v-for="item in goods_list">
						<a :href="'/item?gid='+item.id" title="More Info">
						<figure>
							<img class="rounded-corners img-fluid" :src="'http://127.0.0.1:8000/static/goods/' + item.img"	width="240" height="240">
							<figcaption>
								<div class="thumb-overlay">
										<i class="fas fa-search-plus"></i>
								</div>
							</figcaption>
						</figure>
						
						</a>
						<h4><a :href="'/item/?gid=' + item.id">{{ item.name }}</a></h4>
						<p><span class="emphasis">${{ item.price }}</span></p>
					</div>

				</div>
				<div style="clear:both"></div>
				<br />
				<div>
					<Pagination v-model="pagination" @change="change"></Pagination>
				</div>
			</div>
		</section>
		
		<div class="divider"></div>
		
		<section class="cta text-center">
			<div class="container">
				<h3 class="mt-0 mb-4">Sign up now to save 10% on your first order</h3>
				<form class="subscribe">
					<div class="form-group row pt-3">
						<div class="col-sm-8 mb-3">
							<input type="text" class="form-control" id="inputName" placeholder="Your Name">
						</div>
						<div class="col-sm-4">
							<button type="submit" class="btn btn-lg btn-outline-primary">Sign me up</button>
						</div>
					</div>
				</form>
			</div>
		</section>
		
		<myfooter></myfooter>
    
  </div>
  
</template>


 
<script>


import header from './header.vue';
import footer from './footer.vue';
export default {
  data () {
    return {
	  msg: "这是一个变量",
	  params:[
		  {
			  title: '第一张',
			  link: 'http://www.baidu.com',
			  image: 'https://lokeshdhakar.com/projects/lightbox2/images/image-4.jpg'
		  },
		  {
			  title: '第二张',
			  link: 'http://www.baidu.com',
			  image: 'https://lokeshdhakar.com/projects/lightbox2/images/image-3.jpg'
		  }
		],
	  goods_list: [],
	  pagination: {
		  page:1,
		  size:4,
		  total:0
	  },
	  goods_rank:[]
    }
  },
  mounted:function(){
	  this.get_pics();
	  this.get_goods();
	  this.get_goodsrank();
	  

   

},
  methods:{
	  get_pics(){
			this.axios.get('http://127.0.0.1:8000/pics/').then((result)=>{
				let pics = result.data
				let pics_list = []
				for(let i = 0;i<pics.length;i++){
					pics_list.push({
						'title':pics[i].title,
						'link': 'http://' + pics[i].link,
						'image': 'http://127.0.0.1:8000/static/pic/' + pics[i].image
					})
				}
				this.params = pics_list

			})
	  },
	  pic_click(index, data){
		  window.location.href = data.link
	  },
	  get_goods(){
			this.axios.get('http://127.0.0.1:8000/goodsinfo/',{params:{'page':this.pagination.page,'size': this.pagination.size}}).then((result)=>{
				let goods = result.data.results
				console.log(result.data.results)
				// console.log(goods)
				this.goods_list = goods
				
				this.pagination.total = result.data.count
				console.log(result.data.count)

			})
	  },
	  change(){
			this.axios.get('http://127.0.0.1:8000/goodsinfo/',{params:{'page':this.pagination.page,'size': this.pagination.size}}).then((result)=>{
				
				console.log(result.data)
				this.goods_list = result.data.results
				this.Pagination = result.data.count

			})

	  },
	  goodsclick(e){
		  let goodsID = e.target
		  console.log(goodsID);
	  },
	  // 获取排行榜数据
	  get_goodsrank(){
		  this.axios.get('http://127.0.0.1:8000/goodrank/').then((result)=>{
				
				console.log(result.data)
				// 将数据赋值给goods_rank
				this.goods_rank = result.data
				

			})

	  }
     
  },
  
  // 生命组件
  components:{
	  'myheader':header,
	  'myfooter':footer,
  }
}


</script>
 
<style>



</style>